<template>
  <view class="swiper-component">
    <swiper
      class="swiper"
      circular
      :autoplay="false"
      :interval="3000"
      :duration="500"
      @change="onChange"
    >
      <swiper-item v-for="item in bannerList" :key="item.id">
        <view class="swiper-item"> <image class="image" :src="item.imgUrl" mode=""></image> </view>a
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text
        v-for="(item, index) in bannerList"
        :key="item.id"
        :class="{ dot: true, active: index === activeindex }"
      ></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { BannerItem } from "../types";
defineProps<{
  bannerList: BannerItem[];
}>();
const activeindex = ref<number>(0);
const onChange = (val: { detail: { current: number } }) => {
  activeindex.value = val.detail.current;
};
</script>

<style lang="scss">
.swiper-component {
  width: 100%;
  height: 280rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;

  .swiper-item {
    width: 100%;
    height: 100%;
  }

  .image {
    width: 100%;
    height: 100%;
  }

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;

    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }

    .active {
      background-color: #fff;
    }
  }
}
</style>
